<template>
	<view class="uni-select">
		<view class="select-value" @click="open">
			<slot></slot>
		</view>
		<uni-popup ref="selectPopup" :type="type" :mask-click="false">
			<view class="popup-inner">
				<view class="select-head">
					<view class="select-title">{{title}}</view>
					<view class="iconfont icon-close"  @click="close"></view>
				</view>
				<view class="select-body">
					<view class="select">
						<view @click="select(item)" class="option" :class="{'selected':current && item[rangeKey] == current[rangeKey]}" v-for="(item, index) in range" :key="index">{{rangeLabel?item[rangeLabel]:item}}</view>
					</view>	
				</view>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:"uni-select",
		props:{
			title:{
				type: String
			},
			range:{
				type: Array
			},
			rangeKey:{ // 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为比较选中值
				type: String
			},
			rangeLabel:{ // 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
				type: String
			},
			index:{ // index 的值表示选择了 range 中的第几个（下标从 0 开始）	
				type: Number
			},
			value:{ // v-model
				type: String|Number
			},
			initValue:{ // 初始值
				type: String|Number
			},
			type:{
				type: String,
				default: 'bottom'
			}
		},
		data() {
			return {
				current: null // 当前值
			};
		},
		created() {
			this.init();
		},

		watch:{
			range(val){
				
				this.init();
			},
			initValue(val){
				
				this.init();
			},
			value(val){
				
				this.init();
			}
		},
		methods:{
			open(){
				
				if(!this.range || this.range.length == 0){
					return ;
				}
				uni.hideTabBar()
				this.$refs.selectPopup.open();
				
			},
			close(){
				this.$emit('input', {});
				uni.showTabBar()
				this.$refs.selectPopup && this.$refs.selectPopup.close();
			},
			init(){
				let initValue = this.value || this.initValue || null;
				
				this.current = null;
				if(initValue !== null){
					for(let i=0; i< this.range.length; i++){
						let item = this.range[i];
						let value = this.rangeKey ? item[this.rangeKey] : item;
						if(value == initValue ){
							
							this.current = item;
							//this.onConfirm();
							break;
						}
					}
				}
				
			},
			/**
			 * 选中
			 * @param {Object} item
			 */	
			select(item){
				this.current = item;
				this.$emit("change", item);
				this.close()
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.popup-inner
	{	
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		height:600rpx;
		width: 100%;
		background-color: #FFFFFF;
		
		.select-head{
			display: flex;
			line-height: 124rpx;
			height:124rpx;
			align-items: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #0A1738;
			padding:0 32rpx;
			justify-content: space-between;
			.icon-close{
				font-size:24rpx;
				height: 48rpx;
				line-height: 50rpx;
				width: 48rpx;
				text-align: center;
			}
		}
		
		.select-body{
			height: 400rpx;
			width:700rpx;
			margin:0 auto;
			color:#000000;
			overflow-y: auto;
		
			
			.select{
				flex-wrap: wrap;
				display: flex;
				width:700rpx;
				
				justify-content: flex-start;
				.option{
					width: 218rpx;
					height: 80rpx;
					font-weight: 400;
					color: #0A1738;
					background-color: #F7F7F7;
					line-height: 80rpx;
					text-align: center;
					margin:0 7rpx 24rpx;
					border-radius: 8rpx;
					overflow: hidden;
					
					&.selected{
						background: $uni-color-primary;
						font-weight: 500;
						color: #FFFFFF;
						
					}
				}
			}
			
		}
		
	}
	
	
	
</style>